<%--
  Created by IntelliJ IDEA.
  User: 全谢民
  Date: 2023/10/3
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>智能购票分类</title>
    <script type="text/javascript" rel="script" src="${path}/js/jquery-3.6.4.js"></script>
    <link href="${path}/css/user_page_css/home_page.css" rel="stylesheet" type="text/css">
    <link href="${path}/css/user_page_css/search.css" rel="stylesheet" type="text/css">
    <style>
        /*分类字体变色*/
        .recommend-header .type-recommend:nth-of-type(2){
            color: #FF1268
        }
        /*分界线*/
        .sidebar .item:nth-last-child(2){
            /*display: none;*/
        }
        .dm-header-banner {
            width: 100%;
            height: 75px;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url('../images/user_page_images/tool/red.jpg');
        }
        .sidebar{top: 72.5%;}
        .sidebar .item .icon {
            background-image: url('../images/user_page_images/tool/side.png');
        }
        img{border: 0;}
        .sidebar .item .qrcode{
            background: #fff url('../images/user_page_images/tool/code.png') no-repeat center center;
            background-size: 90%;
        }
        .sidebar .item .qrcode img {
            display: none;
        }
    </style>
</head>
<body>
<c:set var="activityName" value="${sessionScope.activityName}"></c:set>
<c:set var="activityType" value="${sessionScope.activityType}"></c:set>
<c:set var="activityAddress" value="${sessionScope.activityAddress}"></c:set>
<%--头部--%>
<jsp:include page="header.jsp"></jsp:include>
<div class="search-box">
    <div class="search-box-top">
        共<span class="search-box-keyword">123</span>个商品
    </div>
    <div class="search-box-flex">
        <%--        左边分类--%>
        <div class="search-main">
            <%-- 城市/时间/分类---》分类--%>
            <div class="search-factor">
                <%--城市--%>
                <div class="factor-item">
                    <span class="factor-title">城市：</span>
                    <div class="factor-content">
                        <div class="factor-selected">当前选择城市：
                            <span class="factor-selected-city">全国</span>
                        </div>
                        <div class="factor-content-main">
                            <span onclick="funAddress('')"
                                  class="factor-content-item factor-content-item-default factor-content-item-active">
                                全部
                            </span>
                            <div class="factor-content">
                                <span class="factor-content-item" onclick="funAddress('长沙')">长沙</span>
                                <span class="factor-content-item" onclick="funAddress('上海')">上海</span>
                                <span class="factor-content-item" onclick="funAddress('北京')">北京</span>
                                <span class="factor-content-item" onclick="funAddress('成都')">成都</span>
                                <span class="factor-content-item" onclick="funAddress('杭州')">杭州</span>
                                <span class="factor-content-item" onclick="funAddress('天津')">天津</span>
                                <span class="factor-content-item" onclick="funAddress('深圳')">深圳</span>
                                <span class="factor-content-item" onclick="funAddress('广州')">广州</span>
                                <span class="factor-content-item" onclick="funAddress('西安')">西安</span>

<%--                                <span class="factor-content-item" onclick="funAddress('长沙')">123</span>--%>

                               <a class="addressTxt" style="display: inline-block;display:none">
                                   <span class="factor-content-item" onclick="funAddress('长沙')">长沙</span>
                                   <span class="factor-content-item" onclick="funAddress('上海')">上海</span>
                                   <span class="factor-content-item" onclick="funAddress('北京')">北京</span>
                                   <span class="factor-content-item" onclick="funAddress('成都')">成都</span>
                                   <span class="factor-content-item" onclick="funAddress('杭州')">杭州</span>
                                   <span class="factor-content-item" onclick="funAddress('天津')">天津</span>
                                   <span class="factor-content-item" onclick="funAddress('深圳')">深圳</span>
                                   <span class="factor-content-item" onclick="funAddress('广州')">广州</span>
                                   <span class="factor-content-item" onclick="funAddress('西安')">西安</span>

                                   <span class="factor-content-item" onclick="funAddress('长沙')">长沙</span>
                                   <span class="factor-content-item" onclick="funAddress('上海')">上海</span>
                                   <span class="factor-content-item" onclick="funAddress('北京')">北京</span>
                                   <span class="factor-content-item" onclick="funAddress('成都')">成都</span>
                                   <span class="factor-content-item" onclick="funAddress('杭州')">杭州</span>
                                   <span class="factor-content-item" onclick="funAddress('天津')">天津</span>
                                   <span class="factor-content-item" onclick="funAddress('深圳')">深圳</span>
                                   <span class="factor-content-item" onclick="funAddress('广州')">广州</span>
                                   <span class="factor-content-item" onclick="funAddress('西安')">西安</span>

                                   <span class="factor-content-item" onclick="funAddress('长沙')">长沙</span>
                                   <span class="factor-content-item" onclick="funAddress('上海')">上海</span>
                                   <span class="factor-content-item" onclick="funAddress('北京')">北京</span>
                                   <span class="factor-content-item" onclick="funAddress('成都')">成都</span>
                                   <span class="factor-content-item" onclick="funAddress('杭州')">杭州</span>
                                   <span class="factor-content-item" onclick="funAddress('天津')">天津</span>
                                   <span class="factor-content-item" onclick="funAddress('深圳')">深圳</span>
                                   <span class="factor-content-item" onclick="funAddress('广州')">广州</span>
                                   <span class="factor-content-item" onclick="funAddress('西安')">西安</span>
                               </a>
                            </div>
                            <div class="factor-more" onclick="launch(this)">更多</div>
                        </div>
                    </div>
                </div>
                <%--分类--%>
                <div class="factor-item">
                    <span class="factor-title">分类：</span>
                    <div class="factor-content">
                        <div class="factor-content-main">
                            <span onclick="funType('')"
                                  class="factor-content-item factor-content-item-default factor-content-item-active">
                                全部
                            </span>
                            <div class="factor-content">
                                <span class="factor-content-item" onclick="funType('演唱会')">演唱会</span>
                                <span class="factor-content-item" onclick="funType('音乐会')">音乐会</span>
                                <span class="factor-content-item" onclick="funType('曲苑杂坛')">曲苑杂坛</span>
                                <span class="factor-content-item" onclick="funType('话剧歌剧')">话剧歌剧</span>
                                <span class="factor-content-item" onclick="funType('展览休闲')">展览休闲</span>
                                <span class="factor-content-item" onclick="funType('芭蕾舞蹈')">芭蕾舞蹈</span>
                                <span class="factor-content-item" onclick="funType('体育')">体育</span>
                                <span class="factor-content-item" onclick="funType('其他')">其他</span>
                                <span class="factor-content-item" onclick="funType('儿童亲子')">儿童亲子</span>
                            </div>
                        </div>
                    </div>
                </div>
                <%--子类--%>
                <%--<div class="factor-item" style="display:none;">
                    <span class="factor-title">子类：</span>
                    <div class="factor-content">
                        <div class="factor-content-main">
                            <span class="factor-content-item factor-content-item-default factor-content-item-active">
                                全部
                            </span>
                            <div class="factor-content">
                                <span class="factor-content-item" onclick="funType('演唱会')">演唱会</span>
                                <span class="factor-content-item" onclick="funType('音乐会')">音乐会</span>
                                <span class="factor-content-item" onclick="funType('曲苑杂坛')">曲苑杂坛</span>
                                <span class="factor-content-item" onclick="funType('话剧歌剧')">话剧歌剧</span>
                                <span class="factor-content-item" onclick="funType('展览休闲')">展览休闲</span>
                                <span class="factor-content-item" onclick="funType('芭蕾舞蹈')">芭蕾舞蹈</span>
                                <span class="factor-content-item" onclick="funType('体育')">体育</span>
                                <span class="factor-content-item" onclick="funType('其他')">其他</span>
                                <span class="factor-content-item" onclick="funType('儿童亲子')">儿童亲子</span>
                            </div>
                        </div>
                    </div>
                </div>--%>
                <%--时间--%>
                <div class="factor-item">
                    <span class="factor-title">时间：</span>
                    <div class="factor-content">
                        <div class="factor-content-main">
                            <span class="factor-content-item factor-content-item-default factor-content-item-active">
                                全部
                            </span>
                            <div class="factor-content">
                                <span class="factor-content-item">今天</span>
                                <span class="factor-content-item">明天</span>
                                <span class="factor-content-item">本周末</span>
                                <span class="factor-content-item">一个月内</span>
                                <div class="calendar">
                                    <div class="calendar-slot">
                                        <div class="factor-calendar">按日历</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <%--            排序--%>
            <%--            选中改变class--%>
            <div class="search-sort search-main-sort">
                <div class="search-sort_fl">
                    <span class="search-sort-item search-sort-item-active" onclick="changesClass(this,'相关度排序')">相关度排序</span>
                    <span class="search-sort-item" onclick="changesClass(this,'推荐排序')">推荐排序</span>
                    <span class="search-sort-item" onclick="changesClass(this,'最近开场')">最近开场</span>
                    <span class="search-sort-item" onclick="changesClass(this,'最新上架')">最新上架</span>
                </div>
                <c:set var="page" value="${sessionScope.page}"></c:set>
                <div class="pagination-top search-sort_fr">
                    <c:choose>
                        <c:when test="${page.currPageNo==1}">
                            <a class="sort__prev sort__prev_gray"></a>
                        </c:when>
                        <c:otherwise>
                            <a href="${path}/servlet/userSearch/searchAll?index=${page.currPageNo-1}&activityName=${activityName}&activityType=${activityType}&activityAddress=${activityAddress}" class="sort__prev sort__prev_gray"></a>
                        </c:otherwise>
                    </c:choose>
                    <div class="sort__num">
                        <span>${sessionScope.page.currPageNo}</span>/<span>${sessionScope.page.totalPageCount}</span>
                    </div>
                    <c:choose>
                        <c:when test="${page.currPageNo==page.totalPageCount}">
                            <a class="sort__next"></a>
                        </c:when>
                        <c:otherwise>
                            <a href="${path}/servlet/userSearch/searchAll?index=${page.currPageNo+1}&activityName=${activityName}&activityType=${activityType}&activityAddress=${activityAddress}" class="sort__next"></a>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
            <%--            主要内容--%>
            <div class="search__itemlist">
                <div class="item__main">
                    <div class="item__box">
                        <c:set var="state" value="${sessionScope.state}"></c:set>
                        <c:set var="dataList" value="${sessionScope.page.dataList}"></c:set>
                        <c:choose>
                            <c:when test="${empty dataList}">
                                <div class="noitem">没有找到符合条件的商品。您可以减少筛选条件重新搜索。</div>
                            </c:when>
                            <c:otherwise>
                                <c:forEach var="dl" items="${dataList}">
                                    <div class="items">
                                        <a href="#" class="items__img">
                                            <span class="items__img__tag">${dl.activityType}</span><img width="153px" height="206px" src="../images/user_page_images/typeImages/homePageImages/${dl.activityPicture}"></a>
                                        <div class="items__txt">
                                            <div class="items__txt__title">
                                                <a href="#">${dl.activityName}</a>
                                            </div>
<%--                                            <div class="items__txt__time">艺人</div>--%>
                                            <div class="items__txt__time">
                                                <a class="items__txt__venue__icon"></a>
                                                ${dl.activityAddress}
                                            </div>
                                            <div class="items__txt__time">
                                                <a class="items__txt__time__icon"></a>
                                                    ${dl.activityStartDate}
                                                <c:if test="${dl.activityFinishDate !=null}">
                                                    -${dl.activityFinishDate}
                                                </c:if>
                                            </div>
                                            <div class="items__txt__tags"></div>
                                            <div class="items__txt__price">
                                                <span>${dl.activityStartRange}
                                                    <c:if test="${dl.activityFinishRange !=null}">
                                                        -${dl.activityFinishRange}
                                                    </c:if>
                                                    <i>元</i></span>售票中
                                            </div>
                                        </div>
                                    </div>
                                </c:forEach>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
                <%--                底部的页码--%>
                <div class="pagination">
                    <div class="el-pagination is-background">
                        <button type="button" disabled="disabled"class="btn-prev">
                            <i class="el-icon el-icon-arrow-left"></i>
                        </button>
                        <ul class="el-pager">
                            <c:forEach var="i" begin="1" end="${page.totalPageCount}">
                                <li
                                   <c:if test="${page.currPageNo==i}">class="number active"</c:if>
                                   <c:if test="${page.currPageNo!=i}">class="number"</c:if>
                                   onclick="jquery:window.location='${path}/servlet/userSearch/searchAll?index=${i}&activityName=${activityName}&activityType=${activityType}&activityAddress=${activityAddress}'">${i}</li>
                            </c:forEach>
                            <%--<li class="number active">1</li>
                            <li class="number">2</li>
                            <li class="number">3</li>
                            <li class="number">4</li>
                            <li class="number">5</li>
                            <li class="number">6</li>
                            <li class="number">7</li>
                            <li class="el-icon more btn-quicknext el-icon-more"></li>
                            <li class="number">100</li>--%>
                        </ul>
                        <button type="button" class="btn-next">
                            <i class="el-icon el-icon-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <%--右边可能喜欢--%>
        <div class="search search-like">
            <div class="search__title">您可能还喜欢</div>
            <div class="search__box">
                <c:set var="loveList" value="${sessionScope.loveList}"></c:set>
                <c:forEach var="ll" items="${loveList}">
                    <div class="search__item">
                        <a href="#" class="search__item__poster">
                            <img src="../images/user_page_images/typeImages/homePageImages/${ll.activityPicture}">
                        </a>
                        <div class="search__item__info">
                            <a href="#" class="search__item__info__title">
                                ${ll.activityName}
                            </a>
                            <div class="search__item__info__venue">天津奥体中心体育场</div>
                            <div search__item__info__venue>
                               ${ll.activityStartDate}
                                <c:if test="${activityFinishDate!=null}">
                                    -${ll.activityFinishDate}
                                </c:if>
                            </div>
                            <div class="search__item__info__price">
                                <strong>${ll.activityStartRange}元</strong>起
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
</div>
<%--底部--%>
<jsp:include page="footer.jsp"></jsp:include>
<script>
    <%--    把首页的class 由type-recommend select改成type-recommend--%>
    <%--    把分类的class 由type-recommend 改成type-recommend select--%>
    /*function recommend(a) {
        let className=$(a).attr("class");
            alert(className);
        $(".type-recommend").attr("class","type-recommend");
        $(a).attr("class","type-recommend select");
    }*/
function funType(typeName) {
    window.location="${path}/servlet/userSearch/searchAll?activityType="+typeName+"&activityName=${activityName}&activityAddress=${activityAddress}"
}
function funAddress(addressName) {
    window.location="${path}/servlet/userSearch/searchAll?activityAddress="+addressName+"&activityName=${activityName}&activityType=${activityType}"
}
    function changesClass(a,sortName){
        let className=$(a).attr("class");
        if (className == 'search-sort-item'){
            $(".search-sort-item-active").attr("class","search-sort-item");
            $(a).attr("class","search-sort-item search-sort-item-active");
            alert(sortName);
            window.location="${path}/servlet/userSearch/searchAll?activityAddress=${addressName}&activityName=${activityName}&activityType=${activityType}&sortName="+sortName
        }
    }
    function launch(a){
        // addressTxt
        let className=$(a).attr("class");
        if (className == 'factor-more'){
            $(".addressTxt").attr("style","display: block")
            $(a).attr("class","factor-less");
            $(a).html("收起");
        }else {
            $(".addressTxt").attr("style","display: none")
            $(a).attr("class","factor-more");
            $(a).html("更多");
        }
    }
</script>
</body>
</html>
